<template>
	<u-popup v-model="show" mode="left" z-index="9000" length="70%">
		<view class="chapter-title" :style="{'background': readTheme.mainBackground}">
			<view class="" style="font-size: 50rpx;margin-bottom: 20rpx;display: flex;justify-content: space-between;">
				<text>{{bookName}}</text>
			</view>
			<view style="display: flex;justify-content: space-between;align-items: center;">
				<text>共{{total}}章</text>
			</view>
		</view>
		<mescroll-uni :style="'background:'+ readTheme.defaultBackground" top="180" height="100%" ref="mescrollRef" @init="mescrollInit"
		 :down="downOption" :up="upOption" @down="downCallback" @up="upCallback">
			<view :class="index==item.index?'current-chapter':''" class="u-line-1 chapter-item" v-for="item in chapterList" :key="item.index"
			 @click="handleToChapter(item.book_id,item.chapter_id)">{{item.title}}</view>
		</mescroll-uni>
	</u-popup>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import {
		getAllChapterList
	} from '@/api/chapter.js'
	export default {
		mixins: [MescrollMixin], // 使用mixin (在main.js注册全局组件)
		data() {
			return {
				downOption: {
					auto: false //是否在初始化后,自动执行downCallback; 默认true
				},
				upOption: {
					textNoMore: '人家是有底线的~',
					toTop: {
						src: ''
					}
				},
				chapterList: [],
				total: 0,
				show: false
			}
		},
		props: {
			tabBackground: {
				type: Boolean
			},
			bookName: {
				type: String
			},
			bookId: {
				type: [Number, String]
			},
			index: {
				type: [Number, String]
			}
		},
		computed: {
			...mapGetters({
				readTheme: 'readTheme'
			})
		},
		methods: {
			/*下拉刷新的回调 */
			downCallback() {
				let index = this.index
				if (this.chapterList.length > 0) {
					index = this.chapterList[0].index
				}
				getAllChapterList({
					bookId: this.bookId,
					index,
					type: 'last',
					pageSize: 10
				}).then(res => {
					this.mescroll.endSuccess();
					if (this.total === 0) {
						this.total = res.data.total
					}
					//设置列表数据
					this.chapterList = [...res.data.list, ...this.chapterList]
				}).catch(() => {
					//联网失败, 结束加载
					this.mescroll.endErr();
				})
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback() {
				let index = this.index
				if (this.chapterList.length > 0) {
					index = this.chapterList[this.chapterList.length - 1].index + 1
				}
				getAllChapterList({
					bookId: this.bookId,
					index,
					type: 'next',
					pageSize: 50
				}).then(res => {
					if (this.total === 0) {
						this.total = res.data.total
					}
					this.mescroll.endSuccess(10, Boolean(res.data.list.length));
					this.chapterList = [...this.chapterList, ...res.data.list]
				}).catch(() => {
					//联网失败, 结束加载
					this.mescroll.endErr();
				})
			},
			// 跳转章节
			handleToChapter(bookId, chapterId) {
				uni.redirectTo({
					url: `/pages/read/index?bookId=${bookId}&chapterId=${chapterId}`
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.chapter-title {
		padding: 30rpx;
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 10;
	}

	.chapter-item {
		padding: 14rpx 30rpx;
		font-size: 32rpx;
	}

	.current-chapter {
		color: rgb(146, 200, 255);
	}
</style>
